<template>
  <div ww3 auto>
    <div style="margin-bottom:20px">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-if="videoType1">{{videoType1}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{videoType2}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{videoDetailed.title}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="watch">
      <div class="left">
        <div class="video-content">
          <video class="video-content" :src="videoSrc" controls="" controlslist="nodownload noremoteplayback" autoplay="autoplay" name="media" id="videoWrapper">
            <!-- <source type="video/mp4"> -->
          </video>
        </div>
        <div class="video-tips row-start">
          <span>声明</span>
          <p>水印不代表署名仅用于防盗，版权归上传人所有，购买后下载素材无水印</p>
        </div>
        <div class="row-between video-count">
          <div class="video-m-c row-start">
            <span><i class="el-icon-s-comment" style="color:#97aebc"></i>评论8</span>
            <span @click="collectSave"><i class="el-icon-star-on" :class="{'active': ifVideoCollection}"></i>收藏79</span>
          </div>
          <div class="video-m-oper row-between">
            <span>下载小样</span>
            <span>举报作品</span>
            <div class="video-check">
              <span class="quilty">画质检查</span>
            </div>
          </div>
        </div>
        <div class="video-msg flex-warp row-between">
          <div class="msg-item row-between ">
            <div class="msg-i-label">类型</div>
            <div class="msg-i-val row-end">
              <span>{{videoType2}}</span>
              <span class="msg-tip">如何使用{{videoType2}}</span>
            </div>
          </div>
          <div class="msg-item row-between ">
            <div class="msg-i-label">上传日期</div>
            <div class="msg-i-val row-end">
              <span>{{videoDetailed.cmsVideo.updateTime}}</span>
            </div>
          </div>
          <div class="msg-item row-between ">
            <div class="msg-i-label">适用软件</div>
            <div class="msg-i-val row-end">
              <span>After Effects CC2018</span>
              <span class="soft-ae"></span>
            </div>
          </div>
          <div class="msg-item row-between ">
            <div class="msg-i-label">文件大小</div>
            <div class="msg-i-val row-end">
              <span>{{videoDetailed.cmsVideo.fileSize}}</span>
            </div>
          </div>
          <div class="msg-item row-between ">
            <div class="msg-i-label">音频字体</div>
            <div class="msg-i-val row-end">
              <span>仅供参考</span>
            </div>
          </div>
          <div class="msg-item row-between ">
            <div class="msg-i-label">编号</div>
            <div class="msg-i-val row-end">
              <span>{{videoDetailed.cmsVideo.serialNumber}}</span>
            </div>
          </div>
          <div class="msg-item row-between ">
            <div class="msg-i-label">帧率</div>
            <div class="msg-i-val row-end">
              <span>{{videoDetailed.cmsVideo.frameRate}}</span>
            </div>
          </div>
          <div class="msg-item row-between ">
            <div class="msg-i-label">点击</div>
            <div class="msg-i-val row-end">
              <span>4715</span>
            </div>
          </div>
          <div class="msg-item row-between ">
            <div class="msg-i-label">分辨率</div>
            <div class="msg-i-val row-end">
              <span>{{videoDetailed.cmsVideo.resolutionRatio}}</span>
            </div>
          </div>
          <div class="msg-item row-between ">
            <div class="msg-i-label">下载</div>
            <div class="msg-i-val row-end">
              <span>112</span>
            </div>
          </div>
          <div class="msg-item row-between ">
            <div class="msg-i-label">可修改范围</div>
            <div class="msg-i-val row-end">
              <span>全部为分层内容</span>
            </div>
          </div>
          <div class="msg-item row-between ">
            <div class="msg-i-label">销售额</div>
            <div class="msg-i-val row-end">
              <span>2,840元</span>
            </div>
          </div>
        </div>
        <div class="line"></div>
        <p class="note-msg">
          {{videoDetailed.cmsVideo.introduce}}
        </p>
        <div class="line"></div>
        <div class="video-keywords">
          <span v-for="(item, index) in 40" :key="index">国庆</span>
        </div>
      </div>
      <div class="right">
        <div class="row-between">
          <div class="count">
            {{sqText}}
            <span class="money">{{videoDetailed.cmsVideo[sqKey]}}</span>
            <span class="unit">元</span>
          </div>
          <div class="tips">
            <span>授权范本</span>
            <span>授权区别</span>
          </div>
        </div>
        <div class="auth-type row-between">
          <div class="auth-item" :class="{'active': sqActive === 1}" @click="sqClick(1)">
            个人授权
          </div>
          <div class="auth-item" :class="{'active': sqActive === 2}" @click="sqClick(2)">
            企业授权
          </div>
          <div class="auth-item" :class="{'active': sqActive === 3}" @click="sqClick(3)">
            企业PLUS授权
          </div>
        </div>
        <div class="oper-content row-between">
          <div class="download" @click="downVideo">立即下载</div>
          <div class="add-car" @click="addCar">加入购物车</div>
        </div>
        <div class="row-start auth-list">
          <span>原创正版 <i class="el-icon-success" style="color:var(--green)"></i></span>
          <span>肖像权未授权 <i class="el-icon-error" style="color:#c2d0d9"></i></span>
          <span>物权未授权<i class="el-icon-error" style="color:#c2d0d9"></i></span>
        </div>
        <div class="auth-img row-start">
          <div class="img-item"></div>
          <div class="img-item"></div>
          <div class="img-item"></div>
        </div>
        <div class="author-content">
          <div class="atr-msg row-between">
            <div class="msg-left row-start">
              <div class="avtor">
                <img :src="fileUrl + videoDetailed.avatar" width="100%" alt="">
              </div>
              <div>
                <p class="atr-name">{{videoDetailed.nickname}}</p>
                <p class="atr-list">
                  <i class="el-icon-s-custom" style="color:var(--green)"></i>
                  {{videoDetailed.type == 1 ? "个人实名验证" : "企业实名验证"}}
                </p>
              </div>
            </div>
            <div class="msg-collect" @click="collectUserSave">收藏</div>
          </div>
          <div class="row-between">
            <div class="data-item">
              <p class="data-title">{{videoDetailed.total}}元</p>
              <p class="data-tip">近30天收入</p>
            </div>
            <div class="data-item">
              <p class="data-title">{{videoDetailed.zp}}</p>
              <p class="data-tip">作品总数</p>
            </div>
            <div class="data-item">
              <p class="data-title">苏州</p>
              <p class="data-tip">所在地</p>
            </div>
          </div>
          <div class="author-news">
            <dl class="notice-wap" v-for="(item, index) in 5" :key="index" flex flex-b fz-14>
              <dt>
                <span href="" target="_blank">国庆节党政文字片头</span>
              </dt>
              <dd>
                <span href="" target="_blank">一小时前售出</span>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
    <div class="title-about">最新相似素材</div>
    <div class="about-video flex-warp">
      <div v-for="(item, index) in 8" :key="index" class="adout-item"></div>
    </div>
    <p class="v-b-msg">buzo网是素材交易平台，网站所有作品（含预览图）均为供稿人拥有版权并自行上传销售，受著作权法保护，未经权利人许可，请勿使用，否则将
      根据我国著作权的相关法律承担赔偿责任。
    </p>
    <p class="v-b-msg">使用限制：创作人仅对作品中独创性部分享有权利。对含有国旗、国徽等党政图案不享有权利，仅作为作品整体效果的示例展示及爱党爱国宣传，禁止商用</p>
    <div class="comment-content">
      <div class="c-top row-center">
        <div class="comment-btn" @click="dialogFlag=true">发表评论</div>
        <div class="c-type">
          <el-radio-group v-model="radio">
            <el-radio :label="1">全部</el-radio>
            <el-radio :label="2">与我相关</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="comment-item row-between">
        <div class="use-icon"></div>
        <div class="c-i-msg flex-warp">
          <div class="row-between">
            <div class="row-start">
              <span>v210903547412535</span>
              <span class="bought">已购买</span>
              <span class="callback" @click="dialogFlag=true">回复</span>
            </div>
            <span>2021-09-20 01:23:05</span>
          </div>
          <p>评论内容</p>
          <div class="reply-content row-between">
            <div class="reply-icon"></div>
            <div class="c-i-msg flex-warp">
              <div class="row-between">
                <div class="row-start">
                  <span>v210903547412535 回复 v210903547412535</span>
                  <span class="callback" @click="dialogFlag=true">回复</span>
                </div>
                <span>2021-09-20 01:23:05</span>
              </div>
              <p>评论内容</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <el-dialog title="发表评论" :visible.sync="dialogFlag" width="700px">
      <el-input
        class="comment-input"
        type="textarea"
        :rows="6"
        placeholder="请输入"
        v-model="textarea">
      </el-input>
      <div class="comment-submit">提交</div>
    </el-dialog> -->
    <el-dialog
      title="发表评论"
      :visible.sync="dialogFlag"
      width="38%"
      class="show"
    >
      <el-input
        type="textarea"
        placeholder="请输入评论内容"
        v-model="textarea"
        maxlength="255"
        show-word-limit
        :required="true"
        class="chara-form"
      >
      </el-input>
      <div slot="footer" class="dialog-footer" flex flex-c space-be>
        <el-popover placement="top-start" width="230" popper-class="emoji">
          <div style="width: 230px; height: 60px; overflow-y: auto">
            <chat-emoji @addEmoji="addEmoji"></chat-emoji>
          </div>

          <div slot="reference">
            <svg class="icon" aria-hidden="true " cur>
              <use xlink:href="#icon-biaoqing"></use>
            </svg>
          </div>
        </el-popover>

        <el-button type="primary" @click="dialogFormVisible = false"
          >发表评论</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import $http from "@/api/collection/collection"
import $car from "@/api/info/car"
import ChatEmoji from "@/components/ChatEmoji";
import url from "@/url/url.js";

export default {
  components: {
    ChatEmoji
  },
  data() {
    return {
      sqKey: 'individualPrice',
      sqActive: 1,
      sqText: '个人授权',
      ifVideoCollection: false,
      videoDetailed: {
        authenticationStatus: 1,
        authenticationType: null,
        avatar: "/profile/upload/2022/01/01/eb9c2769-644d-49e7-bf69-597b1878f054.jpg",
        cmsVideo: {},
        cmsVideos: [],
        nickname: "大王",
        orders: [],
        total: 0,
        zp: 0,

      },
      fileUrl: this.$url.fileUrl,
      radio: 1,
      dialogFlag: false,
      textarea: '',
      videoType1: '',
      videoType2: '',
      videoId: '',
      videoSrc: ''
    }
  },
  async asyncData({ params }) {
    const res = await $http.getVideoDetailed({
      videoId: params.id
    })
      return {
        videoDetailed: res.data,
        videoSrc: url.fileUrl + res.data.cmsVideo.fileUrl
      }
  },
  mounted() {
    this.videoId = this.$route.params.id;
    this.getVideoType()
    setTimeout(() => {
      document.documentElement.scrollTop = 0;
      window.pageYOffset = 0;
      document.body.scrollTop = 0;
    }, 50)

  },
  methods: {
    /**
     * 下载视频
     */
    downVideo() {
      if(sessionStorage.getItem('userId') == null) {
        window.initLoginDialog(true);
        return;
      }
       this.$router.push('/account/down?id=' + this.videoId);
    },
    /**
     * 授权金额
     */
    sqClick(type) {
      this.sqActive = type;
      switch (type) {
        case 1:
          this.sqText = '个人授权';
          this.sqKey = 'individualPrice';
          break;
        case 2:
          this.sqText = '企业授权';
          this.sqKey = 'enterprisePrice';
          break;
        default:
          this.sqText = '企业PLUS授权';
          this.sqKey = 'enterprisePlusPrice';
      }
    },
    /**
     * 加入购物车
     */
    addCar() {
      let data = {
        userId: sessionStorage.getItem('userId'),
        prodId: this.videoDetailed.cmsVideo.videoId
      }
      $car.addCar(data).then(res => {
        if(res.code == 0) {
          this.$bus.$emit('carNum')
          this.$message('加入购物车成功');
          window.getCarList();
        }
      })
    },
    /**
     * 收藏素材
     */
    collectSave() {
      let data = {
        userId: sessionStorage.getItem('userId'),
        bizId: this.videoDetailed.cmsVideo.videoId
      }
      $http.collectSave(data).then(res => {
        console.log(res);
        if(res.code == 0) {
          this.ifVideoCollection = true;
          this.$message('收藏素材成功');
        }

      })
    },
    /**
     * 收藏创始人
     */
    collectUserSave() {
      let data = {
        userId: sessionStorage.getItem('userId'),
        bizId: this.videoDetailed.cmsVideo.userId
      }
      $http.collectUserSave(data).then(res => {
        if(res.code == 0) {
          this.$message('收藏创始人成功');
        }

      })
    },
    //表情
    addEmoji(item) {
      console.log(item);
      this.textarea += item;
    },
    /**
     * 获取视频类型
     */
    getVideoType() {
      //this.videoDetailed.categoryIds
      let nav = JSON.parse(sessionStorage.getItem("navList"));
      nav.forEach(item => {
        if(item.categoryId == this.videoDetailed.cmsVideo.categoryIds) {
          this.videoType2 = item.categoryName;
          if(item.parentId != 0) {
            nav.forEach(it => {
              if(it.categoryId == item.parentId) {
                 this.videoType1 = item.categoryName;
                return;
              }
            })
          }
          return;
        }
      })
      console.log("this.videoType1", this.videoType1);
      console.log("this.videoType2", this.videoType2);
    },
    //获取视频详情
    getVideoDetailed() {
      let data = {
        videoId: this.videoId
      }
      $http.getVideoDetailed(data).then((res) => {
        console.log('获取视频详情',res);
        this.videoDetailed = res.data;
        let videoWrapper = document.getElementById('videoWrapper');
        videoWrapper.src = this.fileUrl + res.data.cmsVideo.fileUrl;
        this.getVideoType();
      })
    },
  },
}
</script>

<style scoped>
.el-icon-star-on {
  color:#97aebc;
}
.el-icon-star-on.active {
  color: red;
}
.comment-input{
  padding: 0 30px;
  padding-top: 50px;
}
.comment-submit{
  margin: 0 auto;
  margin-top: 50px;
  width: 260px;
  height: 53px;
  line-height: 53px;
  text-align: center;
  border-radius: 5px;
  font-size: var(--content);
  background: var(--green);
  color: #fff;
  margin-bottom: 50px;
  cursor: pointer;
}
.reply-content{
  width: 100%;
  border-radius: 5px;
  padding: 22.5px 30px;
  margin-top: 10px;
  background: #e0e6e9;
}
.c-i-msg{
  flex: 1;
}
.c-i-msg span{
  font-size: var(--content);
  color: #777;
  margin-right: 10px;
}
.c-i-msg .bought{
  color: #dc3e93;
  font-size: var(--small);
}
.c-i-msg .callback{
  width: 80px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 100px;
  font-size: 13px;
  color: var(--green);
  border-color: var(--green);
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
}
.c-i-msg p{
  line-height: 25px;
  word-break: break-word;
  font-size: var(--content);
  color: #555;
}
.comment-item{
  padding: 32.5px 40px;
  margin-bottom: 30px;
  background: #F8F9FA;
}
.comment-item .use-icon{
  width: 80px;
  height: 80px;
  border-radius: 40px;
  background: gray;
  margin-right: 30px;
}
.reply-icon{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: gray;
  margin-right: 30px;
}
.c-top{
  position: relative;
  margin-top: 40px;
  border-top: 2px solid #eee;
  padding-top: 30px;
  margin-bottom: 30px;
}
.c-type{
  position: absolute;
  right: 0;
  bottom: 0;
}
.comment-btn{
  width: 218px;
  height: 38px;
  border-radius: 4px;
  background: var(--green);
  color: #FFF;
  text-align: center;
  line-height: 38px;
  font-size: var(--content);
  cursor: pointer;
}
.v-b-msg{
  font-size: var(--small);
  color: gray;
  text-align: center;
  margin-top: 18px;
}
.title-about{
  margin-top: 40px;
}
.about-video{
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.adout-item{
  width: 24%;
  height: 166px;
  margin-bottom: 12px;
  background: gray;
}
.video-keywords span{
  margin-right: 10px;
  margin-bottom: 16px;
}
.note-msg , .video-keywords{
  padding: 16px 30px;
  background: #EDF1F4;
  font-size: var(--content);
  color: #97989C;
}
.line{
  margin: 0 30px;
  border-bottom: 1px solid #a3a4a8;
  margin-top: -1px;
}
/*  */
.soft-ae{
  width: 22px;
  height: 22px;
  background: url(../../assets/ae.png);
  margin-left: 12px;
}
.msg-tip{
  color: var(--green) !important;
  opacity: 0.6;
  margin-left: 12px;
}
.msg-item{
  width: 40%;
  margin-bottom: 22px;
}
.msg-i-label{
  font-size: var(--content);
  color: #a1a5a6;
}
.msg-i-val span{
  font-size: var(--content);
  color: #4D5154;
  cursor: pointer;
}
.row-end{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.video-msg{
  padding: 20px 30px;
  background: #EFF0F4;
}
.flex-warp{
  flex-wrap: wrap;
}
.quilty{
  padding: 6px 18px 6px 34px;
  border-radius: 15px;
  background: #889AA6;
  color: #f6fafd !important;
  position: relative;
}
.quilty::before{
  content: '';
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  top: 8px;
  left: 12px;
  background: var(--green);
}
.video-count{
  height: 58px;
  padding: 0 20px;
  background: #f5f6f8;
}
.video-tips{
  padding-left: 30px;
  height: 48px;
  background: #EcF0F3;
}
.video-tips span{
  padding: 4px;
  border-radius: 2px;
  background: #E5E9EC;
  color: #6D889B;
}
.video-tips p{
  font-size: var(--content);
  margin-left: 6px;
  color: #a2b5c3;
}
.video-m-c{
  font-size: var(--content);
}
.video-m-c span{
  margin-left: 30px;
  color: #656567;
  cursor: pointer;
}
.video-m-c i{
  font-size: 17px;
}
.video-m-oper{
  font-size: var(--content);
}
.video-m-oper span{
  color: var(--green);
  margin-right: 20px;
  cursor: pointer;
}
.video-content{
  width: 100%;
}
.video-content img{
  width: 100%;
  height: 100%;
}
.row-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.row-start{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.row-between{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.author-news{
  margin-top: 46px;
}
.notice-wap {
  padding-bottom: 12px;
  cursor: pointer;
}

.notice-wap span {
  color: var(--grey);
}
.notice-wap:hover span {
  color: #000000;
}
.notice-wap dt {
  flex: 0 0 60%;
  width: 60%;
}
.data-item{
 min-width: 90px;
 margin-top: 40px;
}
.data-title{
  font-size: var(--content);
  text-align: center;
  margin-bottom: 12px;
}
.data-tip{
  font-size: var(--small);
  color: #999A9E;
  text-align: center;
}
.avtor{
  width: 62px;
  height: 62px;
  background: #000;
  margin-right: 20px;
}
.msg-collect{
  width: 66px;
  height: 26px;
  line-height: 26px;
  border-radius: 4px;
  background: var(--green);
  color: #fff;
  font-size: var(--content);
  text-align: center;
  cursor: pointer;
}
.atr-name{
  font-size: var(--title-small);
  margin-bottom: 16px;
}
.atr-list{
  font-size: var(--small);
  color: #9d9eA2;
}
.author-content{
  border-top: 1px solid #CED2D5;
  padding-top: 16px;
}
.auth-img{
  margin-top: 30px;
  border-top: 1px solid #EAEEF1;
  padding: 20px 0 40px;
}
.auth-img .img-item{
  width: 104px;
  height: 150px;
  background: gray;
  border-radius: 4px;
  margin-right: 14px;
}
.auth-list {
  margin-top: 30px;
}
.auth-list span{
  font-size: var(--content);
  margin-right: 16px;
}
.oper-content .download{
  width: 178px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  background: var(--green);
  color: var(--chilid-nav-bg);
  border-radius: 4px;
  cursor: pointer;
}
.oper-content .add-car{
  width: 114px;
  height: 46px;
  line-height: 46px;
  border: 2px solid #409eff;
  border-radius: 4px;
  text-align: center;
  color: #409eff;
  cursor: pointer;
}
.auth-type .active{
  padding: 6px 20px;
  border: 2px solid #409eff;
  border-radius: 4px;
  color: var(--green);
}
.auth-item{
  margin: 20px 0;
  border-radius: 4px;
  text-align: center;
  font-size: var(--content);
  cursor: pointer;
}
.count{
  font-size: var(--content);
}
.money{
  font-size: var(--title);
  color: red;
}
.unit{
  font-size: var(--small);
}
.tips span{
  font-size: var(--content);
  color: #a1b4c3;
  margin-left: 20px;
  cursor: pointer;
}
.watch{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.left{
  flex: 1;
  padding-right: 16px;
  background-color: #fff;
}
.right{
  width: 416px;
  background-color: var(--light-gray);
  padding: 28px 50px 40px;
}
</style>
